<template>
    <div class="tuijianneirong">
        <div class="tuijianneirong-title">
            <span>推荐话题</span>
            <a @click="handleHuanYiHuan">
                <span class="iconfont icon-huanyihuan"></span>
                换一换
            </a>
        </div>
        <div class="xiahuaxian"></div>
        <div class="tuijianneirongneirong">
            <div class="tuijianneirong-div1" v-for="item in tuijianhuatidata">
                <a href="#">
                    <img v-show="item.status1" src="../../../assets/img/tuijianimg/jian.png" alt="">
                    <img v-show="item.status2" src="../../../assets/img/tuijianimg/jian1.png" alt="">
                    <span class="tuijianneirong-div1-span1">{{ item.centent }}</span>
                    <span class="tuijianneirong-div1-span2">{{ item.visit }}</span>
                </a>
            </div>
        </div>
        <div class="xiahuaxian"></div>
        <div class="chakangengduo">
            <a href="#">
                <span>查看更多</span>
                <span class="iconfont icon-xiangyoujiantou"></span>
            </a>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import type { tuiJianHuatiDataType } from '../../../util/data';
import { getnewtuiJianHuatiData, gettuiJianHuatiData } from '@/util/getapi';

const tuijianhuatidata = ref<tuiJianHuatiDataType>([]);

onMounted(async () => {
    try {
        const tuijianhuatidataget = await gettuiJianHuatiData();
        if (tuijianhuatidataget) {
            tuijianhuatidata.value = tuijianhuatidataget;
        }
    } catch (error) {
        console.error('Failed to fetch tuijianhuatidata:', error);
    }
});

const handleHuanYiHuan = async () => {
    const newtuijianhuatidataget = await getnewtuiJianHuatiData();
    const tuijianhuatidataget = await gettuiJianHuatiData();

    if (tuijianhuatidata.value == tuijianhuatidataget) {
        tuijianhuatidata.value = newtuijianhuatidataget;
        return
    }
    if (tuijianhuatidata.value == newtuijianhuatidataget) {
        tuijianhuatidata.value = tuijianhuatidataget;
        return
    }
};
</script>

<style lang="scss" scoped>
@import url(../../../assets/rightcontent/tuijianhuati.scss);
@import url(../../../assets/rightcontent.scss);
</style>